<template>
  <div class="mapContent">
    <baidu-map
      class="bm-view"
      :center="center"
      :zoom="zoom"
      :scroll-wheel-zoom="true"
      @click="getClickInfo"
      @moving="syncCenterAndZoom"
      @moveend="syncCenterAndZoom"
      @zoomend="syncCenterAndZoom"
      @ready="onMapReady"
    >
      <bm-view class="map"></bm-view>
      <bm-marker
        :position="{ lng: center.lng, lat: center.lat }"
        :dragging="true"
        animation="BMAP_ANIMATION_BOUNCE"
      ></bm-marker>
      <!-- 百度地图搜索控件 -->
      <bm-local-search
        :keyword="keyword"
        :location="'长沙黄花国际机场'"
        :auto-viewport="true"
        :panel="false"
        :select-first-result="false"
        @searchcomplete="searchcomplete"
      ></bm-local-search>
      <bm-control class="mapSearch">
        <bm-auto-complete v-model="keyword" :sugStyle="{ zIndex: 999999 }">
          <input type="text" placeholder="请输入搜索关键字" class="serachinput" v-model="keyword" />
        </bm-auto-complete>
      </bm-control>
      <!-- 百度地图定位控件 -->
      <bm-geolocation
        anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
        :showAddressBar="true"
        :autoLocation="true"
        @locationSuccess="locationSuccess"
      ></bm-geolocation>
    </baidu-map>
    <div class="mapControl">
      <a-button type="ghost" @click="cancel">取消</a-button>
      <a-button type="primary" @click="confirm">确定</a-button>
    </div>
  </div>
</template>

<script>
export default {
  props: ['address'],
  data: function () {
    return {
      BMap: '',
      keyword: '', //百度地图搜索值
      center: { lng: 116.404, lat: 39.915 }, //默认中心点
      zoom: 15, //默认缩放等级，数值越小，地图范围越大
      autoViewport: true, //百度地图检索结束后是否自动调整地图视野
      addressDetailed: '',
      mapvalue: '',
      panel: false, //百度地图是否选展现检索结果面板
      searchadress: '',
    }
  },
  methods: {
    sendList(address) {
      this.keyword = address ? address : ''
    },
    //地图加载完成之后获取百度地图对象
    onMapReady({ BMap, map }) {
      this.BMap = BMap
    },
    //地图的点击事件
    getClickInfo(e) {
      this.center.lng = e.point.lng
      this.center.lat = e.point.lat
      var gc = new this.BMap.Geocoder()
      var that = this
      gc.getLocation(e.point, function (rs) {
        that.addressDetailed = rs.address
      })
    },
    //zoom缩放监控
    syncCenterAndZoom(e) {
      const { lng, lat } = e.target.getCenter()
      this.center.lng = lng
      this.center.lat = lat
      this.zoom = e.target.getZoom()
    },
    //取消按钮
    cancel() {
      // this.center = { lng: 116.404, lat: 39.915 };
      this.$emit('cancel')
    },
    //确认按钮
    confirm() {
      var keywordTemp = this.keyword
      this.$emit('posiEvent', this.center, keywordTemp)
    },
    //百度地图定位完成后操作
    locationSuccess(e) {
      this.center.lng = e.point.lng
      this.center.lat = e.point.lat
    },
    //百度地图搜索框完成之后操作
    searchcomplete(e) {
      if (e) {
        console.log('e',e);
        this.center.lng = e.Yr.length != 0 ? e.Yr[0].point.lng : '116.403963'
        this.center.lat = e.Yr.length != 0 ? e.Yr[0].point.lat : '39.915119'
        console.log('lng',this.center.lng)
        console.log('lat',this.center.lat)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.mapContent {
  width: 100%;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.5);
}
.map {
  width: 100%;
  height: 90vh;
}
.mapSearch input {
  font-size: 16px;
  line-height: 2;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 5px #ccc;
  margin: 10px;
  text-indent: 10px;
}
.mapSearch input:focus {
  border: 1px solid blue;
}
.mapControl {
  padding: 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  button {
    width: 5%;
    margin: 0 20px;
  }
}
</style>